<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    {include file='header'}
</head>

<body>    
    <div class="x-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label label-required">产品名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" value="{$data.name|default=''}" lay-verify="required"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="category_id" lay-filter="category_id" class="layui-select">
                            <option value="0">所属分类</option>
                            {foreach $category as $v}
                            <option value="{$v.id}" {if !empty($data)}{if $data.category_id==$v.id} selected{/if}{/if}>{$v.spl}{$v.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-block">
                        <select name="shop_id" lay-filter="shop_id">
                            <option value="0">选择</option>
                            {foreach $shop as $v}
                            <option value="{$v.id}" {if !empty($data)}{if $data.shop_id==$v.id} selected{/if}{/if}>{$v.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产地</label>
                    <div class="layui-input-block">
                        <input type="text" id="place" name="place" value="{$data.place|default=''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-block">
                        <input type="text" id="spec" name="spec" value="{$data.spec|default=''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" id="unit" name="unit" value="{$data.unit|default='g'}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">包装</label>
                    <div class="layui-input-block">
                        <input type="text" id="package" name="package" value="{$data.package|default=''}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label label-required">上传图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="images">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div class="demo-images" style="padding-top:10px">{if !empty($data)}{if
                        !empty($data.images)}{foreach $data.images as
                        $v}
                        <div class="upload-list"><img data-url="{$v}" src="{$v}" class="upload-img"
                                    ondblclick="removeimg(this)" /><span class="upload-remove"
                                    onclick="remove_img(this)">✖</span></div>
                        {/foreach}{/if}{/if}
                    </div>
                    <input name="images" type="hidden" value="{$data.images_v|default=''}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea name="contents" id="contents"
                        class="layui-textarea">{$data.contents|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">销售价</label>
                    <div class="layui-input-block">
                        <input type="text" id="price" name="price" value="{$data.price|default=0}"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">会员价</label>
                    <div class="layui-input-block">
                        <input type="text" id="vip_price" name="vip_price" value="{$data.vip_price|default=0}" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
               
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">库存</label>
                    <div class="layui-input-block">
                        <input type="text" id="stock" name="stock" value="{$data.stock|default=0}"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" id="sort" name="sort" value="{$data.sort|default=0}" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item">
                 <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" value="1" lay-text="正常|隐藏" lay-skin="switch" {if
                        !empty($data)}{if $data.status==1} checked{/if}{else} checked=""{/if}>
                </div></div>
                 <div class="layui-inline">
                    <label class="layui-form-label">上架商城</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="is_sell" value="1" lay-text="上架|下架" lay-skin="switch" {if
                        !empty($data)}{if $data.is_sell==1} checked{/if}{else} checked=""{/if}>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <input type="hidden" id="id" name="id" value="{$data.id|default=''}">
                <input type="hidden" id="current_page" name="current_page" value="{$current_page}">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn btn-fix" lay-filter="save" lay-submit="">保存</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        $(function () {
            // const list = document.querySelector(".demo-images");
            // console.log(list);
            // let currNode;
            // list.ondragstart = (e) => {
            //     setTimeout(() => {
            //         e.target.classList.add("moving")
            //     }, 0)
            //     currNode = e.target;
            //     e.dataTransfer.effectAllowed = "move";
            // }
            // list.ondragover = (e) => { e.preventDefault(); }
            // list.ondragenter = (e) => {
            //     //允许占用
            //     e.preventDefault();
            //     if (e.target === list || e.target === currNode) {
            //         return;
            //     }
            //     const children = Array.from(list.children);
            //     const currNodeIndex = children.indexOf(currNode);
            //     const targetNodeIndex = children.indexOf(e.target);
            //     if (currNodeIndex < targetNodeIndex) {
            //         console.log("向下拖动")
            //         list.insertBefore(currNode, e.target.nextElementSibling);
            //     } else {
            //         list.insertBefore(currNode, e.target);
            //     }
            //     console.log(e.target);
            //     regetimg()
            // }


            // list.ondragend = (e) => {
            //     e.target.classList.remove("moving");
            // }
            // regetimg()
        })
        function removeimg(obj) {
            $(obj).remove();
            $.post("{:url('removeimg')}", { name: $(obj).attr('src') }, function () { });
            regetimg()
        }
        function remove_img(obj) {
            $(obj).parent("div").remove();
            $.post("{:url('removeimg')}", { name: $(obj).attr('src') }, function () { });
            regetimg()
        }
        function regetimg() {
            var imgs_v = '';
            var imgs = [];
            //.children()
            $(".demo-images img").each(function (v) {
                var imgpath = $(this).attr('src');
                imgs.push(imgpath);
            })
            imgs_v = imgs.join(',');
            $("input[name='images']").val(imgs_v);
        }

        function addspec() {
            var newDom = '<tr><td><input type="text" class="layui-input" name="spec_name" value="" placeholder="请输入规格名称"></td>';
            newDom += '<td><input type="text" class="layui-input" name="spec_price" value="" placeholder="请输入价格，数字格式"></td>';
            newDom += '<td><input type="text" class="layui-input" name="spec_sell_price" value="" placeholder="请输入价格，数字格式"></td>';
            newDom += '<td><input type="text" class="layui-input" name="spec_weight" value="" placeholder="请输入重量，单位KG"></td>';
            newDom += '<td><input type="text" class="layui-input" name="spec_stock" value="" placeholder="请输入库存，数字格式"></td>';
            newDom += '<td><input type="hidden" name="spec_id" value="0"><button type="button" class="layui-btn layui-btn-danger" onclick="removeobj(this,0)">移除</botton></td>';
            newDom + '</tr>';
            $("#spec_list").append(newDom);
        }

        function removeobj(obj, spec_id) {
            //
            console.log(spec_id);
            if (spec_id > 0) {
                $.post("{:url('removespec')}", { id: spec_id }, function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        layer.msg('删除成功', { icon: 1, time: 1000 }, function () {
                            //location.reload();
                            $(obj).parents("tr").remove();
                        })
                    }
                    else {
                        layer.msg(res.msg);
                    }
                })
            }
        }

        layui.use(['upload', 'form'], function () {
            var upload = layui.upload;
            var form = layui.form;
            var uploadInst = upload.render({
                elem: '#images'
                , url: "{:url('wadmin/upload/index')}"
                , multiple: true
                , number: 100
                , done: function (res) {
                    console.log(res)
                    if (res.code == 1) {
                        var imgname = $(".demo-images").html();
                        var filepath=res.data.url;
                        var imgo = '<div class="upload-list"><img data-url="' + filepath + '" src="' + filepath + '" class="upload-img" ondblclick="removeimg(this)"/><span class="upload-remove" onclick="remove_img(this)">✖</span></div>'
                        imgname = imgname + imgo;
                        $(".demo-images").html(imgname);
                        regetimg();
                    }
                    else {
                        layer.msg(res.msg)
                    }
                }
                , error: function () {
                    layer.msg('上传失败');
                }
            });
            //监听提交
            form.on('submit(save)', function (data) {
               
                //console.log(data.field)
                // var arr_name = [];
                // $("input[name='spec_name']").each(function () {
                //     arr_name.push($(this).val());
                // })
                // const newArr = arr_name.map(item => item);
                // const isRepeat = newArr.some((item, index, arr_name) => arr_name.indexOf(item) != index);
                // if (isRepeat) {
                //     layer.msg('规格名称重复')
                //     return;
                // }
                // var spec_name = arr_name.join(',');

                // var arr_spec_id = [];
                // $("input[name='spec_id']").each(function () {
                //     arr_spec_id.push($(this).val());
                // })
                // var spec_id = arr_spec_id.join(',');

                // var arr_price = [];
                // $("input[name='spec_price']").each(function () {
                //     arr_price.push($(this).val());
                // })
                // var spec_price = arr_price.join(',');

                // var arr_sell_price = [];
                // $("input[name='spec_sell_price']").each(function () {
                //     arr_sell_price.push($(this).val());
                // })
                // var spec_sell_price = arr_sell_price.join(',');

                // var arr_vip_price =[];
                // $("input[name='spec_vip_price']").each(function(){
                //     arr_vip_price.push($(this).val());
                // })
                // var spec_vip_price = arr_vip_price.join(',');

                // var arr_stock = [];
                // $("input[name='spec_stock']").each(function () {
                //     arr_stock.push($(this).val());
                // })
                // var spec_stock = arr_stock.join(',');
                // var arr_weight = [];
                // $("input[name='spec_weight']").each(function () {
                //     arr_weight.push($(this).val());
                // })
                // var spec_weight = arr_weight.join(',');
                // for (var i = 0; i < arr_name.length; i++) {
                //     if (arr_name[i] == '' || spec_price[i] == '' || arr_stock[i] == '' || arr_weight[i] == '' || arr_sell_price[i] == '') {
                //         layer.msg('请填写完整规格内容')
                //         return false;
                //     }
                // }
                // var spec = '';
                // if (spec_name != '') {
                //     spec = {
                //         'spec_id': spec_id, 'spec_name': spec_name, 'spec_price': spec_price, 'spec_stock': spec_stock, 'spec_weight': spec_weight, 'spec_sell_price': spec_sell_price
                //         // ,'spec_vip_price':spec_vip_price

                //     }
                // }
                var formdata = data.field;               
                console.log(formdata)
                //return;
                $.ajax({
                    type: "POST",
                    url: "{:url('save')}",
                    data: data.field,
                    datatype: "json",
                    success: function (res, textStatus) {
                        console.log(res)
                        if (res.code == 1) {
                            layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                //location.href = "{:url('admin/goods/index')}?page={$current_page}"
                                parent.layer.close();
                                                parent.location.reload();
                            });
                        }
                        else {
                            layer.msg(res.msg);
                            return false;
                        }
                    },
                    error: function (e) {
                        layer.alert('系统出现错误,请检查系统！', { icon: 2 });
                        return false;
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>